<template>
  <div>
    <div class="product">
      <div class="container">
        <div class="basic">
          <div class="basic-top">
            <template>
              <a-breadcrumb v-for="item in product" :key="item.id">
                <a-breadcrumb-item>商城首页</a-breadcrumb-item>
                <a-breadcrumb-item
                  ><a href="">灵眸 Osmo系列</a></a-breadcrumb-item
                >
                <a-breadcrumb-item><a href="">{{item.name}}</a></a-breadcrumb-item>
                <a-breadcrumb-item>{{item.name}}</a-breadcrumb-item>
              </a-breadcrumb>
            </template>
          </div>
          <div class="basic-main">
            <div class="main-left">
              <div class="img" v-for="item in product" :key="item.id">
                <img :src="item.s_goods_photos[0].path" alt="" />
              </div>
            </div>
            <div class="main-right">
              <div class="content" v-for="item in product" :key="item.id">
                <h1>{{item.name}}</h1>
                <h3>￥{{item.price}}</h3>
                <div class="payment">
                  <span class="minimum">低至 ¥{{(item.price/12).toFixed(2)}}/月 </span>
                  <span>x 24 期，支持花呗分期、京东白条、掌上生活分期付款</span>
                </div>
                <ul>
                  <li>云暮白</li>
                  <li>便携可折叠</li>
                  <li>磁吸快拆设计</li>
                  <li>内置延长杆</li>
                  <li>拍摄指导</li>
                  <li>智能跟随 4.0</li>
                  <li>三轴增稳</li>
                </ul>
                <div class="addCart">
                  <div class="numSelect">
                    <input class="num" type="text" v-model="num">
                    <div class="modify">
                      <a>
                        <input class="plus" @click="add1" type="button" value="+">
                      </a>
                      <a>
                        <input class="reduce" @click="reduce1" type="button" value="-">
                      </a>
                    </div>
                  </div>
                  <div class="add">
                    <a @click="add(data)">
                      <button>加入购物车</button>
                    </a>
                  </div>
                </div>
                <div class="reminder">
                  <p>售后服务由厂家（闪迪）提供。</p>
                  <p>电话：400-827-0929</p>
                  <p>网址：http://kb-cn.sandisk.com/</p>
                </div>
                <div class="beCareful">
                  <div class="beCareful1">
                    <div class="img"></div>
                    <span>免运费</span>
                  </div>
                  <div class="beCareful2">
                    <div class="img"></div>
                    <span
                      >单笔订单可返还订单金额 1% DJI
                      币，用于支付下一次订单</span
                    >
                  </div>
                  <div class="beCareful3">
                    <div class="img"></div>
                    <span>7天无理由退货 *详情参考退货政策</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="detail">
      <div class="container" v-if="product.length>0" v-html="product[0].rich_text">
        
      </div>
    </div>
  </div>
</template>

<script>
import {mapState,mapActions,mapMutations} from 'vuex'
import {getSingleGood,addCart,updateCart} from '../assets/js/request.js'
export default {
  data() {
    return {
      num:1,
      product:[],
    }
  },

  async created() {
    let product = await getSingleGood(this.$route.params.id);
    console.log(product);
    this.product.push(product);
  },

  computed: {
    ...mapState('cart',['cartArr']),
    data() {
      return {
        goods_id:this.product[0].id,
        num:this.num,
        project_id:this.product[0].project_id,
      }
    },

  },

  methods: {
    ...mapMutations('cart',['addNum']),
    ...mapActions('cart',['getCartArr']),

    add1() {
      this.num += 1
    },
    reduce1() {
      this.num -= 1
    },
    
    async add(data) {
      console.log(data);
      // this.getCartArr()
      let isfinded = this.cartArr.some((ele,index)=> this.cartArr[index].goods_id === data.goods_id);
      console.log(isfinded);
      if(!isfinded) {
        console.log(111);
        await addCart(data)
        this.getCartArr()
      }else {
        console.log(222);
        this.cartArr.forEach(async (ele,index)=>{
          if(ele.goods_id === data.goods_id) {
            console.log({num:ele.num + data.num});
            await updateCart(ele.id,{num:ele.num + data.num})
            this.getCartArr()
          }
        })
      }
    }
  }
};
</script>

<style lang="scss" scope>
.product {
  background-color: white;
  margin-top: 2px;
  padding-bottom: 45px;
  .basic {
    .basic-top {
      padding: 20px 0;
      text-align: left;
    }
    .basic-main {
      display: flex;
      justify-content: space-between;
      .main-left {
        width: 670px;
        .img {
          img {
            width: 520px;
          }
        }
      }
      .main-right {
        width: 500px;
        text-align: left;
        .content {
          // width: 444px;
          h1 {
            font-size: 32px;
            font-weight: 600;
            margin-bottom: 8px;
          }
          h3 {
            font-size: 24px;
            margin-bottom: 3px;
          }
          .payment {
            .minimum {
              font-weight: 600;
            }
          }
          ul {
            margin: 16px 13px;
            li {
              list-style-type: disc;
            }
          }
          .addCart {
            display: flex;
            .numSelect {
              width: 84px;
              height: 54px;
              display: flex;
              .num {
                width: 50%;
                height: 100%;
                border: 1px solid black;
                border-right: 0;
                text-align: center;
              }
              .modify {
                width: 50%;
                height: 100%;
                display: flex;
                flex-flow: column;
                a {
                  input {
                    width: 100%;
                    height: 27px;
                    border: 1px solid black;
                    background-color: white;
                  }
                }
                .plus {
                   border-bottom: 0;
                }
              }
            }
            .add {
              margin-left: 16px ;
              button {
                height: 100%;
                width: 215px;
                background-color: #1890ff;
                border: 0;
                border-radius: 3px;
                color: white;
                font-size: 16px;
              }
            }
          }
          .reminder {
            width: 444px;
            background-color: #f7f9fa;
            padding: 16px 16px 16px;
            margin-top: 24px;
            span {
              color: #fa8c16;
              border: 1px solid #fa8c16;
              padding: 2px 5px;
              border-radius: 5px;
            }
            p {
              margin: 5px 0 0;
            }
          }
          .beCareful {
            // padding: 16px 0;
            margin: 16px 0;
            width: 444px;
            border-top: 2px solid #f9f9fa;
            .beCareful1,
            .beCareful2,
            .beCareful3 {
              margin: 18px 0 0;
            }
          }
        }
      }
    }
  }
}
.detail {
    background-color: white;
    padding: 50px 0;
    margin-top: 2px;
    h3 {
      font-size: 32px;
      font-weight: 600;
    }
    .img {
      img {
        width: 100%;
      }
    }
}
</style>